import { ExtractPropTypes, PropType } from "vue"
import { ZIndex } from '../../config'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * actionSheet选项数据类型
 */
export type ActionSheetData = {
  /** 选中返回的值 */
  value: string | number,
  /** 选项内容 */
  content: string,
  /** 选项子内容 */
  subContent?: string,
  /** 背景颜色, 支持十六进制、rgb()、rgba()的值 */
  bgColor?: string,
  /** 字体颜色, 支持十六进制、rgb()、rgba()的值 */
  color?: string,
  /** 是否禁止选择 */
  disabled?: boolean
}

/**
 * props参数
 */
export const actionSheetProps = {
  /** modelValue, 控制actionSheet显示与隐藏 */
  modelValue: {
    type: Boolean,
    default: false
  },
  /** 选项数据 */
  data: {
    type: Array as PropType<Array<ActionSheetData>>,
    default: (): ActionSheetData[] => {
      return []
    }
  },
  /** 显示遮罩 */
  mask: {
    type: Boolean,
    default: true
  },
  /** 底部取消按钮文本, 为空则不设置 */
  bottomCancelBtn: {
    type: String,
    default: '取消'
  },
  /** zIndex */
  zIndex: {
    type: [String, Number],
    default: ZIndex.popup
  }
}
export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>

export const actionSheetEmits = {
  [UPDATE_MODEL_EVENT]: (value: boolean) => typeof value === 'boolean',
  change: (value: string | number) => typeof value === 'string' || typeof value === 'number'
}
export type ActionSheetEmits = typeof actionSheetEmits
